<template>
	<div class="node-wrap">
		<div class="node-wrap-box" @click="show">
			<div class="title" style="background: #f95166;">
				<el-icon class="icon"><el-icon-promotion /></el-icon>
				<span>{{ nodeConfig.nodeName }}</span>
				<el-icon class="close" @click.stop="delNode()"><el-icon-close /></el-icon>
			</div>
			<div class="content">
				<span v-if="toText(nodeConfig)">{{ toText(nodeConfig) }}</span>
				<span v-else class="placeholder">执行延迟事件</span>
			</div>
		</div>
		<add-node v-model="nodeConfig.childNode" :parent-data="nodeConfig"></add-node>
		<el-drawer title="抄送人设置" v-model="drawer" destroy-on-close append-to-body :size="500">
			<template #header>
				<div class="node-wrap-drawer__title">
					<label @click="editTitle" v-if="!isEditTitle">{{form.nodeName}}<el-icon class="node-wrap-drawer__title-edit"><el-icon-edit /></el-icon></label>
					<el-input v-if="isEditTitle" ref="nodeTitle" v-model="form.nodeName" clearable @blur="saveTitle" @keyup.enter="saveTitle"></el-input>
				</div>
			</template>
			<el-container>
				<el-main style="padding:0 20px 20px 20px">
					<el-form label-position="top">
						<el-form-item label="延时方式">
							<el-button-group class="ml-4">
								<el-button type="primary" @click="regular">固定时长</el-button>
								<el-button type="primary" @click="auto">自动计算</el-button>
							</el-button-group>
						</el-form-item>
						<el-form-item v-if="timeType==1">
							<el-input-number
									v-model="form.props.time"
									class="mx-4"
									:min="1"
									:max="10"
									controls-position="right"
									@change="changeDate('FIXED')"
							/>
							<el-select v-model="form.props.unit" @change="changeType('FIXED')"  style="width: 60px;margin-left: 5px;">
								<el-option label="天" value="D"/>
								<el-option label="时" value="H"/>
								<el-option label="分" value="M"/>
								<el-option label="秒" value="S"/>
							</el-select>
						</el-form-item>
						<el-form-item v-if="timeType==2">
							<el-date-picker
								style="width: 200px"
								v-model="form.props.dateTime"
								type="datetime"
								placeholder="时间选择"
								format="YYYY-MM-DD HH:mm:ss"
								value-format="YYYY-MM-DDTHH:mm:ss"
								@change="changeDateTime"
							/>
						</el-form-item>
						<el-form-item label="触发事件">
							<el-select v-model="form.props.event" style="width: 200px" ref="taskEnv" @change="changeEvent" placeholder="Select">
								<el-option-group
									v-for="group in options"
									:key="group.label"
									:label="group.label"
								>
									<el-option
										v-for="item in group.options"
										:key="item.value"
										:label="item.label"
										:value="item.value"
									/>
								</el-option-group>
							</el-select>
						</el-form-item>
					</el-form>
				</el-main>
				<el-footer>
					<el-button type="primary" @click="save">保存</el-button>
					<el-button @click="drawer=false">取消</el-button>
				</el-footer>
			</el-container>
		</el-drawer>
	</div>
</template>

<script>
	import addNode from './addNode'

	export default {
		inject: ['select'],
		props: {
			modelValue: { type: Object, default: () => {} }
		},
		components: {
			addNode
		},
		data() {
			return {
				nodeConfig: {},
				drawer: false,
				isEditTitle: false,
				form: {

				},
				// 时间输入类型 1输入框 2:时间框
				timeType:1,
				options : [
					{
						label: '系统',
						options: [
							{
								value: 'pass',
								label: '进入下一步',
							}
						],
					},
				]
			}
		},
		watch:{
			modelValue(){
				this.nodeConfig = this.modelValue
			}
		},
		mounted() {
			this.nodeConfig = this.modelValue
		},
		methods: {
			// 显示
			show(){
				this.form = {}
				this.form = JSON.parse(JSON.stringify(this.nodeConfig))
				this.drawer = true
			},
			// 编辑标题
			editTitle(){
				this.isEditTitle = true
				this.$nextTick(()=>{
					this.$refs.nodeTitle.focus()
				})
			},
			// 标题保存
			saveTitle(){
				this.isEditTitle = false
			},
			// 保存
			save(){
				this.$emit("update:modelValue", this.form)
				this.drawer = false
			},
			// 删除节点
			delNode(){
				this.$emit("update:modelValue", this.nodeConfig.childNode)
			},
			// 固定按钮
			regular(){
				this.form.props.type="FIXED"
				this.timeType=1;
			},
			// 自动计算
			auto(){
				this.form.props.type="AUTO"
				this.timeType=2;
			},
			toText(nodeConfig){
				if (typeof(nodeConfig.props) !='undefined' && nodeConfig.props.type == 'FIXED'){
					switch (nodeConfig.props.unit){
						case 'D':
							return "等待"+nodeConfig.props.time+"天"+"触发"+nodeConfig.props.taskName
						case 'H':
							return "等待"+nodeConfig.props.time+"小时"+"触发"+nodeConfig.props.taskName
						case 'M':
							return "等待"+nodeConfig.props.time+"分钟"+"触发"+nodeConfig.props.taskName
						case 'S':
							return "等待"+nodeConfig.props.time+"秒"+"触发"+nodeConfig.props.taskName
						default:
							return "未设置"+"触发"+nodeConfig.props.taskName
					}
				}else {
					if (typeof(nodeConfig.props) !='undefined'){
						return ""+nodeConfig.props.dateTime+"触发"+nodeConfig.props.taskName;
					}
				}
			},
			// 改变时间
			changeDate(type){
				if (type == 'FIXED'){
					this.nodeConfig.props.time=this.form.props.time;
					this.nodeConfig.props.unit=this.form.props.unit;
					this.nodeConfig.props.type=this.form.props.type;
					this.nodeConfig.props.event=this.form.props.event;
					this.nodeConfig.props.taskName=this.form.props.taskName;
				}

				this.toText(this.nodeConfig)
			},
			// 改变类型
			changeType(type){
				if (type == 'FIXED'){
					this.nodeConfig.props.time=this.form.props.time;
					this.nodeConfig.props.unit=this.form.props.unit;
					this.nodeConfig.props.type=this.form.props.type;
					this.nodeConfig.props.event=this.form.props.event;
					this.nodeConfig.props.taskName=this.form.props.taskName;
				}
				this.toText(this.nodeConfig)
			},
			// 日期控件改变
			changeDateTime(){
					this.nodeConfig.props.dateTime=this.form.props.dateTime;
					this.nodeConfig.props.unit=this.form.props.unit;
					this.nodeConfig.props.type=this.form.props.type;
					this.nodeConfig.props.event=this.form.props.event;
					this.nodeConfig.props.taskName=this.form.props.taskName;
					this.toText(this.nodeConfig)
			},
			// 事件触发改变
			changeEvent(){
				this.$nextTick(() => {
					this.nodeConfig.props.taskName =this.$refs.taskEnv.selected.currentLabel;
					this.nodeConfig.props.event=this.form.props.event;
					this.toText(this.nodeConfig);
				})
			}
		}
	}
</script>

<style>
</style>
